<template>
  <section class="content animate__animated  animate__fadeInRight">
    <section class="content_title">
      <img src="https://oss.qiacaiba.com/screen/screen/card01_tag02.png">
    </section>
    <section class="content_content">
      <section class="leftImg">
        <el-image
          class="img"
          src="https://oss.qiacaiba.com/screen/screen/detail_content_right01.png"
        />
      </section>
      <section class="rightMsg">
        <section class="rightMsg-title">
          实施改造升级
        </section>
        <section class="rightMsg-desc ellipsis-multiline">
          自主研发生态养殖程序，实施物联网改造，建设水质在线监测预警系统
        </section>
      </section>
    </section>
    <section class="content_content">
      <section class="leftImg">
        <el-image
          class="img"
          src="https://oss.qiacaiba.com/screen/screen/detail_content_right02.png"
        />
      </section>
      <section class="rightMsg">
        <section class="rightMsg-title">
          工厂复制推广
        </section>
        <section class="rightMsg-desc ellipsis-multiline">
          复制黄鳝陆基循环水数字养殖示范中心成功经验，新建先锋村培苗炼苗养殖基地
        </section>
      </section>
    </section>
    <section class="content_content">
      <section class="leftImg">
        <el-image
          class="img"
          src="https://oss.qiacaiba.com/screen/screen/detail_content_right03.png"
        />
      </section>
      <section class="rightMsg">
        <section class="rightMsg-title">
          黄鳝智能炼苗工厂
        </section>
        <section class="rightMsg-desc ellipsis-multiline">
          黄鳝智能炼苗工厂运用数字与物联网技术，将有效解决苗种繁育配套问题
        </section>
      </section>
    </section>
  </section>
</template>
<script setup lang="ts">

</script>

<style scoped lang="scss">
.ellipsis-multiline {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4; /* 限制最多显示3行 */
  overflow: hidden;
  text-overflow: ellipsis; /* 可选，部分浏览器不生效 */
  word-break: break-word;
}
.content {
  width: 510px;
  margin-top: 0px;

  .content_content {
    width: 100%;
    height: 220px;
    background-image: url("@/assets/detail_bg01.png");
    background-size: 100% 100%;
    background-position: center center;
    background-repeat: no-repeat;
    padding: 20px 36px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
    margin-bottom: 30px;

    &:first-child {
      margin-top: 10px;
    }

    .leftImg {
      width: 200px;
      height: 180px;
      border: 3px solid #026AB1;

      .img {
        display: block;
        width: 100%;
        height: 100%;

      }
    }

    .rightMsg {
      width: 230px;

      &-title {
        color: #08FBFF;
        font-family: Source Han Sans;
        font-weight: 700;
        font-size: 28px;
        font-variation-settings: "opsz" auto;
      }

      &-desc {
        margin-top: 10px;
        font-family: Source Han Sans;
        font-weight: 700;
        font-size: 22px;
        font-variation-settings: "opsz" auto;
        color: #B7E2FF;
        line-height: 30px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4; /* 限制最多显示3行 */
        overflow: hidden;
        text-overflow: ellipsis; /* 可选，部分浏览器不生效 */
        word-break: break-word;

      }
    }
  }
}

.content_title {
  display: flex;
  justify-content: center;

  img {
    display: block;
    width: 231px;
    height: 56px;
  }
}
</style>
